<template >
     <div v-loading.fullscreen.lock="loading">
        <div class="pic" v-if="loading==false&login==-1">
            <img src="../assets/10-404.png" style="width: 40%">
            <p style="margin-top: -4%;font-size: 20px;color: #6f6767;"></p>
        </div>
    </div>
    <!-- <div class="container" ref="containerRef">
        <div class="item">
            <label class="item-title" for="username">用户名</label>
            <p><input class="item-input item-ordinary common" name="username" v-model="username" required></input></p>
        </div>
        <div class="item">
            <label class="item-title" for="password">密码</label>
            <p><input class="item-input item-ordinary common" type="password" name="password" v-model="password" required></input></p>
        </div>
        <div class="item">
            <label class="item-title" for="verificationCode">验证码</label>
            <div class="wrapper-code">
                <input class="item-input item-code common" name="verificationCode" v-model="imgCode" required></input>
                <img class="item-img common" :src="imgSrc" alt="验证码" @click="initCode"/>
            </div>
        </div>
        <div class="item">
            <button class="login-btn" @click="login">登录</button>
        </div>

        <div class="mask"></div>
    </div> -->

</template>

<script>
import { uuid } from '@/utils/util'
import md5 from 'md5'

export default {
    name: "index",
    data() {
        return {
            loginKey: uuid(),
            username: '',
            password: '',
            imgSrc: '',
            imgCode: '',
            loading: true,
            login:0
        }
    },
    mounted() {
        let param1 = this.$route.query.sign;
        console.log(param1)

        const params = {
            openId: param1
        }
        this.$api.commonPost('/dyrl/login_wb/glptLogin', params).then(res => {
            this.loading=false
            const result = res.data
            if (result.code !== -1) {
                sessionStorage.setItem('accessToken', result.result.accessToken);
                this.$router.replace('/')
            } else {
                alert(result.message)
                this.login=-1;
            }
        })
    },
    methods: {

    }
}
</script>

<style scoped>
p {
    margin: 0;
    padding: 0;
}

.pic{
    height: 85vh;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}


.container {
    width: 800px;
    padding: 20px;
    margin: 100px auto;
    box-sizing: border-box;
    background-color: rgba(15, 99, 158, 0.2);
    box-shadow: 7px 7px 7px #0666B8;
    border-radius: 8px;
}

.common {
    height: 50px;
    box-sizing: border-box;
    background-color: #fff;
    border-radius: 8px;
    border: 3px solid #0666B8;
    font-size: 20px;
}

.item {
    display: flex;
    width: 70%;
    flex-direction: column;
    margin: 40px auto;
}

.item .item-ordinary {
    width: 100%;
}

.item .item-code {
    width: 70%;
}

.item .item-img {
    width: 28%;
}

.item .item-title {
    color: #f5f5f5;
    font-size: 18px;
    font-weight: 600;
    text-align: left;
    margin: 0 0 3px 3px;
}

.item .item-input {
    padding: 20px;
    margin: 0;
}

.wrapper-code {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.login-btn {
    height: 50px;
    border: none;
    border-radius: 8px;
    background: linear-gradient(to top right, #0666B8, #03345C);
    color: #FFFFFF;
    font-size: 20px;
    font-weight: 600;
}

.mask {
    width: 90px;
    height: 50px;
    background-color: #000000;
    position: absolute;
    top: 40px;
    left: 0;
}
</style>